<div class="main-container">

  <div class="search-wrap">
    <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
      <nz-form-item>
        <nz-form-label>日期</nz-form-label>
        <nz-form-control>
          <nz-range-picker formControlName="rangePickerTime"></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>调度人</nz-form-label>
        <nz-form-control>
          <nz-select nzPlaceHolder="请选择" formControlName="fromMember">
            <nz-option *ngFor="let item of peopleOption" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>会话人</nz-form-label>
        <nz-form-control>
          <nz-select nzPlaceHolder="请选择" formControlName="toMember">
            <nz-option *ngFor="let item of peopleOption" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>关键词</nz-form-label>
        <nz-form-control>
          <input formControlName="keyword" nz-input placeholder="关键词"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
          <button nz-button nzType="default" class="btn-ora" (click)="onAdd()"><i nz-icon nzType="plus"></i>新增</button>
          <button nz-button nzType="default" (click)="exportDocx()"><i nz-icon nzType="download" nzTheme="outline"></i>导出</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>

  <div class="main-wrap">
    <div class="left-panel">
      <div class="day-list">
        <div *ngFor="let day of dayList"
             [ngClass]="{'active': day.value === selectedDay}"
             (click)="selectDay(day)">{{day.text}}</div>
      </div>
    </div>

    <div class="right-panel">
      <div class="form">
        <div *ngIf="tableData.length == 0" style="padding:20px;font-size: 24px;text-align: center">
          暂无数据
        </div>
        <ng-container *ngIf="tableData.length > 0">
          <div class="sheet" *ngFor="let item of tableData">
            <div class="bar">
              <div>调度时间：{{item.changeDate}}</div>
              <div>记录人：{{item.creatorName}}</div>
              <div></div>
            </div>
            <div class="textarea">
              <div>事件：</div>
              <textarea nz-input readonly>{{item.content}}</textarea>
            </div>
            <div class="file-wrap">
              <div><strong>相关附件</strong></div>

              <div class="file-list" *ngFor="let file of item.fileList">{{file.fileName}}  <a (click)="download(file)">下载</a></div>
            </div>
          </div>
        </ng-container>

      </div>
    </div>
  </div>

  <nz-modal nzClassName="custom-modal"  nzWidth="1000" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
            (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="form">
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">记录人</nz-form-label>
            <nz-form-control>
              <nz-select nzPlaceHolder="请选择" formControlName="toMember">
                <nz-option *ngFor="let item of peopleOption" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">调度时间</nz-form-label>
            <nz-form-control>
              <nz-date-picker nzShowTime [nzFormat]="'yyyy-MM-dd HH:mm'" formControlName="changeDate"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">事件</nz-form-label>
            <nz-form-control>
              <textarea formControlName="content" nz-input rows="4" style="width: 400px"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">相关附件</nz-form-label>
            <nz-form-control>
              <nz-upload
                [nzAction]="uploadUrl"
                [(nzFileList)]="fileList"
              >
                <button nz-button><i nz-icon nzType="upload"></i>文件上传</button>
                <p class="ant-upload-hint">
                  支持扩展名：doc .docx .pdf .jpg...
                </p>
              </nz-upload>
            </nz-form-control>
          </nz-form-item>

        </div>

      </div>
    </form>
  </nz-modal>
</div>
